<template>
  <div>
    <div v-if="setup == 'resetpass' ? true : false">
      <br />
      <br />
      <p class="textcneter">用户名是：{{ user.username }}</p>
      <p class="resetpass">
        <el-button type="primary" plain @click="resetpass"
          >一键重置密码</el-button
        >
      </p>
      <p class="textcneter">说明：重置密码为：123456</p>
    </div>

    <div v-else style="margin-right: 20px">
      <br />
      <br />
      <el-form
        :model="numberValidateForm"
        ref="numberValidateForm"
        label-width="80px"
      >
        <el-form-item label="用户名">
          <el-input :placeholder="user.username" :disabled="true"> </el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input
            v-model="numberValidateForm.nickname"
            :disabled="true"
            maxlength="15"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="现有头像">
          <el-avatar :size="55" :src="user.avatar">
            <img :src="user.avatar" alt="" />
          </el-avatar>
        </el-form-item>
        <el-form-item label="上传头像">
          <el-upload
            class="avatar-uploader"
            name="avatar"
            :action="uploadAction"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :on-change="handleChangePic"
            :on-success="onSuccess"
            :multiple="false"
            :headers="upHeaders"
            :auto-upload="false"
            accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
            ref="doctypeCrfile"
            :data="pppss"
          >
            <div slot="tip" class="el-upload__tip">
              上传头像格式只能是<br />JPG,PNG,JPEG<br />
              且大小不能超过 2MB
            </div>
            <el-avatar
              :size="55"
              v-if="imageUrl"
              :src="imageUrl"
              class="avatar"
            ></el-avatar>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-button
          style="margin-left: 40%"
          type="primary"
          @click="submitForm('numberValidateForm')"
          >确定修改</el-button
        >
      </el-form>
    </div>
  </div>
</template>

<script>
import { ApiSetpassword } from "../../../api/api";
  import {
    baseURL
  } from "../../../api/request";
export default {
  props: ["setup", "user", "drawer"],
  data() {
    return {
      uploadAction:baseURL() + '/api/userlist/avatarUpload',
      numberValidateForm: {
        username: "",
        nickname: "",
        avatar: "",
      },
      imageUrl: "",
      fileList: 0,
      pppss: {
        username: "",
      },

      upHeaders: {
        Authorization:'Basic ' + localStorage.getItem("token"),
      },
    };
  },
  created() {

  },
  watch: {
    user: {
      immediate: true,
      handler(newVal) {
        this.pppss.username = newVal.username;
        this.numberValidateForm.nickname = newVal.nickname;
        this.numberValidateForm.avatar = newVal.avatar;
      },
    },
  },

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.fileList != 0) {
            this.$refs.doctypeCrfile.submit();
          }

          setTimeout(() => {
            this.imageUrl = null;
          }, 1000);
        } else {
          this.$message.error("提交失败");
          return false;
        }
      });
    },

    resetpass() {
      ApiSetpassword({
        username: this.user.username,
      }).then((res) => {
        if (res.code == 400) {
          return this.$message({
            message: res.message,
            type: "warning",
          });
        }
        this.$emit("drawers", false);
        this.$message({
          message: res.message,
          type: "success",
        });
      });
    },

    handleChangePic(file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1);
      }

      this.fileList = fileList.length;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    onSuccess(res, file, fileList) {
      if (res.code == 400) {
        this.$message({
          message: res.message,
          type: "warning",
        });
      } else {
        this.$message({
          message: "上传头像成功",
          type: "success",
        });
      }

      this.$emit("tables", res.data);
      this.$emit("drawers", false);
    },
    beforeAvatarUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = testmsg === "jpg";
      const extension2 = testmsg === "png";
      const extension3 = testmsg === "jpeg";
      const extension4 = testmsg === "JPG";
      const extension5 = testmsg === "PNG";
      const extension6 = testmsg === "JPEG";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (
        !extension &&
        !extension2 &&
        !extension3 &&
        !extension4 &&
        !extension5 &&
        !extension6
      ) {
        this.$message.error("上传头像图片格式不正确!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return (
        (extension ||
          extension2 ||
          extension3 ||
          extension4 ||
          extension5 ||
          extension6) &&
        isLt2M
      );
    },
  },
};
</script>

<style scoped>
.resetpass {
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 126px;
  margin-top: 50%;
}

.textcneter {
  text-align: center;
}

.avatar-uploader >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

.avatar-uploader >>> .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 55px;
  height: 55px;
  line-height: 55px;
  text-align: center;
}

.avatar {
  width: 55px;
  height: 55px;
  display: block;
  border-radius: 50%;
}
</style>
